<template>
  <div class="component-search" :class="{open}">
    <form class="bar" @submit.prevent="search">
      <r-icon name="search.svg" class="icon-search"/>
      <input type="search" ref="search" placeholder="请输入产品名称搜索" class="search" v-model="keyword" @focus="onFocus" @blur="onBlur"/>
      <r-btn class="btn-cancel" @click="cancel" v-if="open">取消</r-btn>
      <r-btn none class="btn-menu" v-else v-html="menuIcon"></r-btn>
    </form>
    <div v-if="open">
      <div class="panel-group" v-if="keywords && keywords.length">
        <h4>历史搜索</h4>
        <div class="keywords">
          <span v-for="word in keywords" :key="word" @click="research(word)">{{word}}</span>
        </div>
        <div>
          <r-btn @click="clearSearchLogs" class="btn-clear">清除历史</r-btn>
        </div>
      </div>
      <div class="panel-group">
        <h4>热门搜索</h4>
        <div class="keywords">
          <span v-for="word in hot" :key="word" @click="research(word)">{{word}}</span>
        </div>
      </div>
      <div class="panel-group">
        <h4>也许你会喜欢</h4>
        <div class="keywords">
          <span v-for="word in guess" :key="word" @click="research(word)">{{word}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RBtn from 'src/components/r-btn'
import store, {MUTATION} from 'src/store'
import hot from '../../resource/data/hot'
import menuIcon from 'src/images/icons/menu.svg'
import searchIcon from 'src/images/icons/search.svg'
import RIcon from 'src/components/r-icon'

export default {
  name: 'r-search',
  components: {
    RBtn,
    RIcon
  },
  data () {
    return {
      menuIcon,
      searchIcon,
      focused: false,
      concern: false,
      hot,
      guess: ['手工正山小种', '紫砂壶']
    }
  },
  computed: {
    open: {
      get () {
        return this.focused || this.concern
      },
      set (open) {
        this.focused = open
        this.concern = open
        if (!open) {
          this.$refs.search.blur()
        }
      }
    },
    keyword: {
      get () {
        return this.$route.query.q
      },
      set (keyword) {
        const query = {...this.$route.query}
        if (keyword) {
          query.q = keyword
        } else {
          delete query.q
        }
        this.$router.replace({query})
      }
    },
    keywords () {
      return store.getters.keywords
    }
  },
  methods: {
    onFocus () {
      this.open = true
    },
    onBlur () {
      this.focused = false
    },
    search () {
      const {keyword} = this
      this.logSearch(keyword)
      this.open = false
    },
    research (keyword) {
      this.keyword = keyword
      this.logSearch(keyword)
      this.open = false
    },
    cancel () {
      this.keyword = ''
      this.open = false
    },
    updateRouteQuery (append) {
      const query = {...this.$route.query, ...append}
      this.$router.replace({query})
    },
    logSearch (keyword) {
      store.commit(MUTATION.ADD_SEARCH_LOG, {keyword})
    },
    clearSearchLogs () {
      store.commit(MUTATION.CLEAR_SEARCH_LOG)
    }
  }
}
</script>
<style lang="scss">
  @import '../styles/index';

  .component-search {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 5;
    width: 100%;

    .bar {
      @extend %flex-center;
      padding: 8px 6px;
      color: white;
    }

    .icon-search {
      width: 32px;
      height: 32px;
      margin-right: -42px;
      margin-left: 10px;
      box-sizing: border-box;
      padding: 5px;
      opacity: 0.8;
      fill: currentColor;
    }

    .search {
      -webkit-appearance: none;
      box-sizing: border-box;
      height: 32px;
      line-height: 20px;
      border: 0 none;
      padding: 6px 10px 8px 38px;
      border-radius: 24px;
      flex: 1;
      background-color: rgba(0, 0, 0, 0.35);
      margin: 0 6px;
      color: inherit;

      &::-webkit-search-cancel-button {
        display: none;
      }

      &::placeholder {
        color: white;
        font-size: 13px;
      }
    }

    .btn-menu {
      margin: 0  6px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.35);
      color: #f0f0f0;
      font-size: 20px;
      @extend %flex-center;
      font-weight: 300;
      padding: 6px;

      svg {
        width: 100%;
        fill: currentColor;
      }
    }

    .btn-cancel {
      background-color: unset;
      color: #666;
      font-size: 15px;
    }

    .panel-group {
      padding: 6px 12px;
      margin: 10px 0;
    }

    h4 {
      font-size: 1em;
      font-weight: normal;
      color: #999;
      margin: 0;
      line-height: 20px;
    }

    .keywords {
      overflow: hidden;
      padding-top: 5px;

      span {
        display: inline-block;
        color: #666;
        background-color: #f0f0f0;
        line-height: 20px;
        border-radius: 4px;
        flex: 1;
        padding: 3px 8px;
        margin: 3px 8px 3px 0;
      }
    }

    .btn-clear {
      background-color: transparent;
      color: $color-primary;
      margin-left: -10px;
    }

    &.open {
      position: fixed;
      bottom: 0;
      background-color: white;

      .bar {
        color: $color-body;
      }

      .search {
        background-color: #f7f7f7;
        background-size: 20px 20px;

        &::placeholder {
          color: #999;
        }
      }
    }
  }
</style>
